<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { MapManager } from "../core/MapManager";
import { useRoute } from "vue-router";
import timeAxis from '@/components/timeAxis/index.vue'
// import jilin from "../../../assets/data/mapJson/22000.json";
import xinjiang from "../../../assets/data/mapJson/650000.json";
import { getMapJson } from "@/api/map";
import mapStore from "@/stores/modules/map.ts";
import { getAssets } from "../../../utils";
// 引入主处理库
const olService = MapManager.getInstance()
const route = useRoute()

const store = mapStore()
const props = defineProps({
  isMake: {
    type: Boolean,
    default: false
  }
})

// 计算属性控制时间轴显示
const showTimeAxis = computed(() => {
  return !props.isMake
})

// 计算属性控制右侧栏位置
const getRightPosition = computed(() => {
  if (store.mapType.includes('layer') || store.mapType.includes('plane')) {
    return '290px'
  }
  if (props.isMake) {
    return '97%'
  }
  if (route.path === '/detectionData') {
    return '260px' // 根据实际需求调整
  }
  return '10px'
})



onMounted(() => {
  // 初始化地图
  olService.initMap({
    containerId: "map_container", center: [87.617733,43.792818], zoom: 6, baseLayer: []
  })
  getMapJson().then((res:any) => {
    olService.addGeoJson_bordLine("testss", res, false)  // 添加边界线
  olService.addGeoJson_note("testsss",res, false)  // 添加注记
  })
  

  const focusing = [{
    id: 'focusing',
    name: '聚焦',
    coordinates: [123, 12],
    data: {},
    image: getAssets(`images/model/focu.png`)
  }]

  olService.addMarks(focusing[0].id, focusing, false)
  // olService.setLayerVisble('focusing', false)
  // const focusing2 = [{
  //   id: 'focusing',
  //   name: '聚焦',
  //   coordinates: [121, 12],
  //   data: {},
  //   image: getAssets(`images/model/focu.png`)
  // }]

  // setTimeout(() => {
  //   olService.updateMark(focusing[0].id, focusing2)
  //   olService.mouseFocu()
  // }, 4500);


  // olService.setLayerVisble(focusing[0].id, false)
})

</script>

<template>
  <div class="main_mapContainer">
    <div id="map_container"></div>
    <timeAxis v-if="!showTimeAxis"></timeAxis>
  </div>
</template>

<style scoped lang="scss">
.main_mapContainer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

#map_container {
  width: 100%;
  height: 100%;
}

.timeline {
  position: absolute;
  right: 0px;
  bottom: 10px;
  z-index: 3;
  padding: 0 10px;
  box-sizing: border-box;
}

.controlGroup {
  position: absolute;
  top: 80px;
  right: 10px;
  min-height: 300px;
  // width: 40px;
  // height: 40px;
  z-index: 20;

  .icon-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 27px;
    padding: 2px 6px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 5px;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

    span {
      font-size: 10px;
    }
  }
}

.functionSvg {
  width: 35px;
  height: 28px;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #D5F2FF 0%, rgba(156, 185, 248, 0.80) 100%);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.3s;

  &:hover {
    background-color: #F5F7FA;
  }
}

.bottomSvg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: rgba(30, 85, 204, 0.80);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.40);

  &:nth-child(2) {
    margin: 8px 0;
  }
}

.svActiveBg {
  border-radius: 4px;
  background: linear-gradient(90deg, #61CDFF 0%, #1677FF 40.15%, #1E55CC 100%);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
}

/* 弹窗样式 */
:deep(.ol-popup) {
  position: absolute;
  // background-color: white;
  // padding: 10px;
  // border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  display: none;
  /* 默认隐藏 */
  z-index: 10;
}

:deep(.ol-popup:after) {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}
</style>
